<template>
  <div class="loading" v-if="listLoading" v-loading="listLoading" element-loading-text="类型列表加载中~~"></div>
  <div class="card" v-else>
  <el-row v-for="typeName in showList" :key="typeName?.name" class="rowItem">
    <el-col :span="2" class="colTitle">
      <span>{{typeName?.label}}:</span>
    </el-col>
    <el-col :span="22" class="colItem">
      <span
        v-for="item in typeName?.choises"
        :key="item?.id"
        class="item"
        :data-id="item?.id"
        :data-filterCode="typeName?.name"
      >{{item?.name}}</span>
    </el-col>
  </el-row>
  <div class="showButton" @click="changeShowAll">{{showButton}}</div>
</div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'TypeList',
});
</script>
<script setup lang="ts">
import { onMounted, ref , computed , nextTick} from 'vue';
//假数据展示
/*const fakeDate = [
  {
    choises:[
      {id:'1', name:'中国舞'},
      {id:'1', name:'中国舞'},
      {id:'1', name:'中国舞'},
      {id:'1', name:'中国舞'},
      {id:'1', name:'中国舞'},
      {id:'1', name:'中国舞'},
      {id:'1', name:'中国舞'},
      {id:'1', name:'中国舞'},
      {id:'1', name:'中国舞'},
      {id:'1', name:'中国舞'},
      {id:'1', name:'中国舞'},
      {id:'1', name:'中国舞'},
      {id:'1', name:'中国舞'}
    ],
    label:'兴趣技能',
    name:'hobby'
  },
  {
    choises:[{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'}],
    label:'兴趣技能',
    name:'hobby'
  },
  {
    choises:[{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'}],
    label:'兴趣技能',
    name:'hobby'
  },
  {
    choises:[{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'}],
    label:'兴趣技能',
    name:'hobby'
  },
  {
    choises:[{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'},{id:'1', name:'中国舞'}],
    label:'兴趣技能',
    name:'hobby'
  },
]*/
//引入api请求
import courseApi from '@/api/course/courseApi';
//引入类型限制请求
import type {
  typeListType
} from '@/api/course/model/courseType'
import {ElMessage} from 'element-plus';
onMounted(()=>{

  listLoading.value = true
  //数据是响应式的，等待数据来需要时间
  setTimeout(()=>{
    // console.log('pathProps',pathProps);
    nextTick(()=>{
      getTypeList()
    })
    //打印可展示的列表
    // console.log('showList',showList.value);
  },2000)
})
//获取父组件props传参
interface pathDate {
  path:string
}
const pathProps = defineProps<pathDate>()
//初始化响应式类型列表数据
const typeList = ref<typeListType>([])
const showAll = ref<boolean>(false)
//创建loading动画化执行值
const listLoading = ref(false)
//根据路径发送请求获取数据
const getTypeList = async () => {
  try {
    const re = await courseApi.reqTypeList({path:pathProps.path})
    // console.log('列表返回值',re);
    typeList.value = re
    listLoading.value = false
  }catch (e) {
    ElMessage.warning(e as any)
  }
  // console.log(typeList.value);
}
//判断是局部展示还是完全展示，可以选用计算属性来计算返回值
const showList = computed(()=>{
  if (showAll.value === false){
    const list = []
    for (let i = 0;i<2;i++){
      // console.log('typeList.value方法内',typeList.value);
      list.push(typeList.value[i])
    }
    return list
  }else {
    return typeList.value
  }
})
//展开收起按钮内文字响应式处理
const showButton = computed(()=>{
  return showAll.value?'收起':'展开全部';
})
//添加点击事件更改showAll
const changeShowAll= () =>{
  // console.log(1);
  showAll.value = !showAll.value
  // console.log('showList',showList.value);
}
//创建一个响应式类型用来收集被选中的对象的id
//点击选择类型
/*function choseTypeList(e:Event){
  // console.log((e.target as HTMLElement)?.dataset);

}*/
</script>

<style scoped lang="scss">
.card{
  margin-top: 10px;
  background-color: #fff;
  padding: 26px 30px;
  width: 1200px;
  .rowItem{
    font-size: 14px;
    &+.rowItem{
      margin-top: 10px;
    }
    .colTitle{
      padding: 7px 0;
      color: #b1b5c1;
    }
    .colItem{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .item{
        color: #1482f0;
        display: inline-block;
        cursor: pointer;
        border-radius: 3px;
        font-size: 14px;
        padding: 7px 13px;
        margin-right: 24px;
        margin-bottom: 10px;
      }
    }
  }
  .showButton{
    text-align: center;
    color: #f93684;
    font-size: 16px;
    margin: 20px 0 0;
    cursor: pointer;
  }
}
.loading{
  width: 1200px;
  height: 150px;
  background-color: transparent;
  margin-bottom: 10px;
}
</style>
